<template>
    <div class="container" :style="'min-height: '+$docHeight+'px'">
        <div v-if="!showTimeOut&&showCont">
            <div class="orderHead">
                <div class="serchCont">
                    <div class="serchInput">
                        <input v-model="serchKey" @keydown="keyDownFn($event)" placeholder="请输入订单号或医生姓名" />
                        <div @click="serchFn" class="serchBtn iconfont icon-sousuo2"></div>
                    </div>
                </div>
                <div class="orderTop">
                    <div class="orderNav">
                        <div :class="stepId==item.id?'navItem_active':'navItem'" @click="navFn(item)" :key="index" v-for="(item,index) in navArr">{{item.val}}</div>
                    </div>
                </div>
            </div>
            <div class="orderCont">
                <div class="orderItem" @click="toDetail(item)" :key="index" v-for="(item,index) in 10">
                    <div class="itemHead">
                        <div class="orderNum">YD468126813899</div>
                        <div class="orderStatus">挂号成功</div>
                    </div>
                    <div class="orderMain">
                        <div class="itemForm">
                            <div class="formItem">
                                <div class="itemName">医生姓名</div>
                                <div class="itemVal">倪鑫博士</div>
                            </div>
                            <div class="formItem">
                                <div class="itemName">就诊姓名</div>
                                <div class="itemVal">吴欢</div>
                            </div>
                            <div class="formItem">
                                <div class="itemName">就诊性别</div>
                                <div class="itemVal">男</div>
                            </div>
                            <div class="formItem">
                                <div class="itemName">预约时间</div>
                                <div class="itemVal">2024-06-31 11:30</div>
                            </div>
                        </div>
                        <div class="orderPricr">¥150.00</div>
                    </div>
                </div>
            </div>
            <footcpm></footcpm>
        </div>
    </div>
</template>
<script>
  import footcpm from '@/components/footcpm.vue'

    export default {
        components: {footcpm},
        name:'',
        data() {
            return {
                showTimeOut:false,
                showCont:false,
                serchKey:'',
                navArr:[
                    {val:'全部',id:0},
                    {val:'待付款',id:1},
                    {val:'待诊断',id:6},
                    {val:'已完成',id:2},
                    {val:'已取消',id:3},
                ],
                stepId:0,
                orderArr:[
                    {}
                ],
            }
        },
        props: {},
        setup(){},
        methods:{
            keyDownFn(){

            },
            serchFn(){

            },
            toDetail(){
                this.$router.push({path:'/orderDetail'})
            },
            navFn(item){
                this.stepId = item.id
                this.orderList = []
                this.page = 1
            },
        },
        mounted(){},
        created() {
            this.showCont =true
        },
    }
</script>
<style scoped lang="less">
 .container {
    padding-bottom: 3rem;
    box-sizing: border-box;
    background-color: #ebf9f3;
    padding-top: 6.75rem;
    .orderHead{
        width: 100%;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        .serchCont{
            width: 100%;
            background-color: #fff;
            padding: 0.75rem 4%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .backBtn{
                margin-right: 0.25rem;
                font-size: 1rem;
                padding: 0 0.25rem;
            }
            .serchInput{
                flex: 1;
                width: 0.5rem;
                background-color: #fff;
                // margin-right: 0.6rem;
                padding: 0 0.25rem 0 0.75rem;
                color: #777;
                border-radius: 1rem;
                box-sizing: border-box;
                height: 1.8rem;
                line-height: 1.8rem;
                // white-space: nowrap;
                // overflow: hidden;
                font-size: 0.65rem;
                // text-overflow: ellipsis;
                display: flex;
                align-items: center;
                border: 1px solid #5cc78e;
                input{
                    border: none;
                    outline: none;
                    padding:0;
                    width: 100%;
                    height: 1.8rem;
                    line-height: 1.8rem;
                    background: none;
                    font-size: 0.6rem;
                }
                .serchBtn{
                    width: 1.8rem;
                    height: 1.8rem;
                    font-size: 1.2rem;
                    text-align: center;
                    line-height: 1.8rem;
                    border-radius: 50%;
                    color: #5cc78e;
                    // color: white;
                }
                }
            }
        .orderTop{
            width: 100%;
            padding: 0 4%;
            box-sizing: border-box;
            background-color: #fff;
            .orderNav{
                width: 100%;
                display: flex;
                position: relative;
                justify-content: space-between;
                .navItem,.navItem_active{
                    width: 25%;
                    text-align: center;
                    padding: 0.75rem;
                    box-sizing: border-box;
                    font-size: 0.7rem;
                    color: #666;
                    white-space: nowrap;
                }
                .navItem_active{
                    color: #5cc78e;
                    border-bottom: 1px solid #5cc78e;
                }
            }
        }
    }
    .orderCont{
        width: 92%;
        margin: 0 auto;
        .orderItem{
            background-color: #fff;
            border-radius: 0.25rem;
            padding: 0.75rem 4%;
            box-sizing: border-box;
            margin-bottom: 0.75rem;
            .itemHead{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 0.75rem;
                box-sizing: border-box;
                border-bottom: 1px dashed #ccc;
                .orderNum{
                    font-size: 0.8rem;
                    font-weight: bold;
                }
                .orderStatus{
                    color: #5cc78e;
                    font-size: 0.6rem;
                }
            }
            .orderMain{
                margin-top: 0.75rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .itemForm{
                    flex: 1;
                    width: 1rem;
                    margin-right: 0.75rem;
                    .formItem{
                        display: flex;
                        margin-bottom: 0.5rem;
                        .itemName{
                            // font-size: 0.6rem;
                            margin-right:0.75rem;
                        }
                        .itemVal{
                            color: #666;
                            // font-size: 0.6rem;
                        }
                    }
                }
                .orderPricr{
                    font-size: 1rem;
                    color: #5cc78e;
                }
            }
        }
    }
 }
</style>